<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
</head>
<body>

<p id="p" style="width: 10em;">
  This paragraph contains two lines of text.
</p>

<p id="description"></p>
<pre id="tree"></pre>
<div id="console"></div>

<script>

async_test((t) => {
    var axParagraph = accessibilityController.accessibleElementById('p');
    var axStaticText = axParagraph.childAtIndex(0);
    assert_equals(axStaticText.childrenCount, 2);

    var axInlineBefore0 = axStaticText.childAtIndex(0);
    assert_equals(axInlineBefore0.name, 'This paragraph contains ');
    var axInlineBefore1 = axStaticText.childAtIndex(1);
    assert_equals(axInlineBefore1.name, 'two lines of text.');

    // Modify the text.
    document.getElementById("p").style.width = "100em";

    // Wait for a notification on the element before checking the new state.
    axStaticText.addNotificationListener(t.step_func((notification) => {
        // Make sure the inline text boxes changed.
        assert_equals(axStaticText.childrenCount, 1);
        var axInlineAfter0 = axStaticText.childAtIndex(0);
        assert_equals(axInlineAfter0.name, 'This paragraph contains two lines of text.');
        t.done();
    }));
}, "Tests that accessible inline text boxes update when the static text style changes.");

</script>

</body>
</html>
